<template>
  <div>
    <div class="breadcrumb" :style="bStyle.breadcrumb">
      <div v-if="showBack" class="goBack" @click="goBack"> <span class="el-icon-arrow-left"></span></div>
      <el-breadcrumb separator="/" :style="bStyle.title">
        <el-breadcrumb-item :to="index">首页</el-breadcrumb-item>
        <template v-if="breadcrumb">
          <el-breadcrumb-item>{{breadcrumb.name}}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  name:'breadcrumb',
  props:{
    index:{type:Object,default:()=>{return {path: '/'}}},
    data:{type:Array,default:()=>[]},
    showBack:{type:Boolean,default:()=>false},
    paramsType:{type:String,default:()=>"type"},
    bStyle:{
      type:Object,
      default:function(){
        return {
          breadcrumb:{
            'padding-left': '40px',
            'margin-top': '18px'
          },
          title:{
            'font-size':'20px'
          }
        }
      },
    }
  },
  data(){
    return {
      datas:[
        { name: "大米手机", type: "dami" },
        { name: "红米", type: "redmi" },
        { name: "大米手机", type: "dami2" },
        { name: "电视", type: "tv" },
        { name: "平板", type: "pad" },
        { name: "电视", type: "tv2" },
        { name: "路由器", type: "roter" }
      ]
    }
  },
  computed:{
    breadcrumb:function(){
      let d = this.data.length!=0 ? this.data : this.datas
      let obj
      for(let i of d){
        if(i.type == this.$route.params.type){
          obj = i
        }
      }
      if(this.$route.params.type!=undefined){
        obj = obj == undefined ? {name:this.$route.params.type,type:this.$route.params.type} : obj
      }else{
        try{
          let params = JSON.parse(this.$route.params.obj)
          obj = obj == undefined ? {name:params.type,type:params.type} : obj
        }catch(e){
          if(JSON.stringify(this.$route.params)=="{}"){
            obj = {name:'home',type:'home'}
          }
        }
      }
      return obj
    },
  },
  methods:{
    goBack(){
      this.$route.name == 'home' ? '' : this.$router.go(-1)
    },
  }
}
</script>

<style lang="less">
.breadcrumb{
  .goBack{
    float: left;
    display: inline-block;
    cursor: pointer;
    position: relative;
    top: -5px;
    font-size: 20px;
  }
  .goBack:hover{
    background: #F5F5F5;
  }
  .el-breadcrumb{
    margin-left: 40px;
  }
}
</style>